/**
 * @Description:  # TODO 页面一打开的时候,发送ajax,获取班级信息
 * @Author: 文渊
 * @Date: 2023-08-30 10:35:53
 */
window.onload = function () {
    renderclzz();
}

/* 利用事件的委托实现删除与硒鼓 */
const clazztBody = document.getElementById("clazztBody")
clazztBody.addEventListener("click", e => {
    // console.log(e.target);
    //修改操作
    if (e.target.className.includes('warning')) {
        //存储修改的关键字
        localStorage.setItem("toclazzPage","修改")
        document.getElementById("modalAdd").innerHTML = "修改"

        //获取ID
        const id = e.target.dataset.id;
        //发送ajax
        const axios = ajax();
        axios({
            url:"/clazz/queryone?id="+id,
            method:"get",
            headers:{token:localStorage.getItem("token")}
        })
        .then(res=>{
            //渲染页面
            console.log(res);
            document.getElementById("cid").value = res.msg[0].cid;
            document.getElementById("cname").value = res.msg[0].cname;
            document.getElementById("count").value = res.msg[0].count;
            document.getElementById("subject").value = res.msg[0].subject
        })
    }
    //删除操作
    if (e.target.className.includes('danger')) {
        /* 
            1. 防止误删
            2. 获取id
            3. 发送ajax
            4. 重新渲染
        */
        const result = window.confirm("您确定要删除吗?")
        if (result) {
            //获取id
            const id = e.target.dataset.id;//获取id
            //发送ajax请求
            const axios = ajax();
            axios({
                url: "/clazz/remove",
                method: "post",
                data: { id },
                headers: { token: localStorage.getItem("token") }
            })
            .then(res => {
                renderclzz();
            })
        }
    }
})

//封装一个重新请求的ajax数据=>渲染班级页面
function renderclzz() {
    const axios = ajax()
    axios({
        url: "/clazz/queryall",
        headers: { token: localStorage.getItem("token") }
    })
    .then(res => {
        // console.log("获取返回的数据",res);
        //渲染
        const clazztBody = document.getElementById("clazztBody")
        //在渲染之前,需要清空
        clazztBody.innerHTML = "";
        //数据要存储
        localStorage.setItem("clazzInfo",JSON.stringify(res.msg))
        res.msg.forEach((item, index) => {
        let str = `
            <tr align="center">
                <td>${index + 1}</td>
                <td>${item.cname}</td>
                <td>${item.count}</td>
                <td>${item.subject}</td>
                <td>
                    <button class="btn btn-danger btn-sm" data-id='${item.cid}'>删除</button>
                    <button class="btn btn-warning btn-sm" data-id='${item.cid}' data-bs-toggle="modal" data-bs-target="#clazzModal">修改</button>
                </td>
            </tr>
            `
            clazztBody.innerHTML += str;
        })
    })
}


//添加事件
function clazzAdd(){
    localStorage.setItem("toclazzPage","添加")
    //让模态框里面的修改变成添加
    document.getElementById("modalAdd").innerHTML = "添加"
}

//添加班级信息
function submitclazz(){
    const cname = document.getElementById("cname").value.trim()
    const count = document.getElementById("count").value.trim()
    const subject = document.getElementById("subject").value
    const id = document.getElementById("cid").value;
    const editoradd = localStorage.getItem("toclazzPage")
    //校验
    if(!cname.length || !count.length || subject == "-1"){
        return alert("请输入完整的信息")
    } 
    if(editoradd == '添加'){
        const axios = ajax();
        axios({
            url:"/clazz/add",
            method:"post",
            data:{
                cname,count,subject
            },
            headers:{token:localStorage.getItem("token")}
        })
        .then(res=>{
            window.alert(res.msg)
            //重新渲染页面
            location.reload();
        })
    }else{
        const axios = ajax()
        axios({
            url:"/clazz/edit",
            method:"post",
            data:{
                id,cname,count,subject
            },
            headers:{token:localStorage.getItem("token")}
        })
        .then(res=>{
            window.alert(res.msg)
            location.reload();
        })
    }

}

/**
 * @Description:  # TODO 选择学科
 * @Author: 文渊
 * @Date: 2023-08-30 15:43:25
 */
const choosesubject = document.getElementById("choosesubject")
choosesubject.addEventListener("click",(e)=>{
    //获取选中的文本值
    const text = e.target.innerText;
    //从storage里面获取班级信息
    const clazzInfo = JSON.parse(localStorage.getItem("clazzInfo"))
    let info;
    if(text == '全部'){
        //渲染所有的数据
        info = clazzInfo
    }else{
        info = clazzInfo.filter(item => item.subject == text)
    }
    // 渲染工作
    const clazztBody = document.getElementById("clazztBody")
    //渲染工作
    renderclassInfo(info)
})



/**
 * @Description:  # TODO 点击人数对人数进行排序
 * @Author: 文渊
 * @Date: 2023-08-30 16:27:04
 */
let orderbyindex = 0;//排序,点击一次,++,如果是奇数那么就升序,偶数就降序
function orderbycount(){
    orderbyindex++

    //从storage里面获取班级信息
    const clazzInfo = JSON.parse(localStorage.getItem("clazzInfo"))

    if(orderbyindex % 2){
        clazzInfo.sort(function(a,b){return a.count - b.count})
    }else{
        clazzInfo.sort(function(a,b){return b.count - a.count})
    }
    //渲染工作
    renderclassInfo(clazzInfo)
}

function renderclassInfo(clazzInfo){
    const clazztBody = document.getElementById("clazztBody")
    clazztBody.innerHTML = "";
    clazzInfo.forEach((item,index)=>{
        let str = `
        <tr align="center">
            <td>${index + 1}</td>
            <td>${item.cname}</td>
            <td>${item.count}</td>
            <td>${item.subject}</td>
            <td>
                <button class="btn btn-danger btn-sm" data-id='${item.cid}'>删除</button>
                <button class="btn btn-warning btn-sm" data-id='${item.cid}' data-bs-toggle="modal" data-bs-target="#clazzModal">修改</button>
            </td>
        </tr>
        `
        clazztBody.innerHTML += str;
    })
}